<template>
<div>
<h4>随机点名</h4>
名字是:
<div>{{word}}</div>
<button @click="onewei">开始</button>
<button @click="twowei">结束</button>

</div>
</template>

<script>
export default {
data(){
return{
word:"这里出名字",
arr : ['马超', '黄忠', '赵云', '关羽', '张飞'],
three:''
}
},
methods:{
onewei(){
this.three= setInterval(()=>{ 
this.word=this.arr[Math.floor(Math.random() * this.arr.length)]},50)
},
twowei(){
clearInterval(this.three)
}
}

}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

h2 {
  text-align: center;
}

.box {
  width: 600px;
  margin: 50px auto;
  display: flex;
  font-size: 25px;
  line-height: 40px;
}

.qs {
  width: 450px;
  height: 40px;
  color: red;
}

.btns {
  text-align: center;
}

.btns button {
  width: 120px;
  height: 35px;
  margin: 0 50px;
}
</style>